<script setup lang="ts">

const props = defineProps({
  categories: {
    type: Array,
    required: true
  },
  activeCategory: {
    type: String,
    required: true
  }

});
console.log(props.categories, props.activeCategory);
const emit = defineEmits(['category-select']);

const handleCategorySelect = (key: string) => {
  emit('category-select', key);
};
</script>
<template>
  <el-aside width="30%" class="sidebar">
    <el-menu
        :default-active="activeCategory"
        class="category-menu"
        @select="handleCategorySelect"
    >
      <el-menu-item
          v-for="category in categories"
          :key="category"
          :index="category"
      >
        {{ category }}
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>
<style scoped>
.sidebar {
  background-color: #fff;
  border-right: 1px solid #f0f0f0;
}

.category-menu {
  border-right: none;
}
</style>
